iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
2
Modern Web

TypeScript + React + 雜七雜八系列 第 9

【Day 09】JSS

  • 分享至 

  • xImage
  •  

大家好,今天的篇章要介紹的是 JSS

會延續前一天的專案結構接續下去進行修改,如果沒有參與到昨天的建置過程,這邊也有提供原始碼
https://github.com/littlehorseboy/typescript-react/tree/day08-material-ui


JSS

JSS 是一個 CSS in JS 的函式庫,可以用 JavaScript 來定義 classNames 及 styles,筆者認為他有些許部分很像 Sass,像是 nested selectors 之類的寫法,不過 JS 倒是原本就有變數、函數這些功能可以用了。

Material UI 提供的 styles 定義方式就是基於 react-jss 的方式來擴充的,先示範一段定義一個閃亮亮 hover 的 button。

+ src/components/day09/ShineButton/ShineButton.tsx

參考 https://cssfx.dev/ 這裡的 css,改成用 jss 寫的方式

執行結果

實際執行處理完後的程式碼是這樣的

不管你的 .tsx 用了幾個,他的 className 都會在結尾按照編號 1 2 3 ...,一直照順序往下編,所以 class 名稱就能大大方方的取,不怕會有重複的問題(不過現在只要是基於 component 來設置 css 的方式或是有用 webpack 的 loader 來調整,應該都可以做得到這種功能)。


Default Theme

他還有提供一系列的 CSS 設置屬性可以直接利用,因為 typescript 型別檢查的關係,需要改寫一些些

src/components/day09/ShineButton/ShineButton.tsx

執行結果

這邊我們在 makeStyles 時,掛上一個帶有 theme 參數的回傳 function,theme 參數可 參考這,這邊筆者用了一些它提供的設置屬性,最特別的應該是

Material UI 提供了它預設使用的 breakpoint 斷點範圍,可以直接用上面程式碼的 theme.breakpoint.up 或 theme.breakpoint.down 來指定 CSS Media Queries,如果能靈活運用這些設置屬性,並且在特殊需求時善用 createMuiTheme 來 override,定能對管理 CSS 有大大的幫助。

不知道是不是 material-ui 版本升級的關係,之前還要用 https://material-ui.com/styles/api/#createstyles-styles-styles 這種方式來讓 typescript 理解回傳值,不過既然它編譯得過,那就這樣吧。


以上就是筆者常用到的 Material UI 的 JSS 使用方式,如果各位有在 React 中用過 css 或 sass 的經驗,就會需要對 webpack 引入一些 loader,還有 autoprefixer,JSS 因為就是 js 語法,已經省掉載入不同 loader 的步驟,還有 autoprefixer,Material UI 封裝的 JSS 也幫你做掉了,https://material-ui.com/styles/advanced/#jss-plugins ,可以看看連結裡面的連結 jss-plugin-vendor-prefixer。


最後附上原始碼
https://github.com/littlehorseboy/typescript-react/tree/day09-jss


明天會介紹 React Router 來實作 SPA!


上一篇
【Day 08】React UI Components Library 「Material-UI」
下一篇
【Day 10】React Router 之最基本的用法
系列文
TypeScript + React + 雜七雜八30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言